<template>
    <fieldset>
    <div id="app">
        <div class="add">
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="productName">
            <br>
            产品图片:<input type="text" v-model="imgSrc">
            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="add">
        </div>
        <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件">
        </div>
        <div>
            <table class="tb">
                <tr>
                    <th>
                        全选:
                        <input type="checkbox" v-model='allCheck' @change="allCheckChange">
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <!-- 动态生成内容tr -->
                <tr v-for="(item,index) of products" :key="item.id">
                    <td>
                        <input type="checkbox" v-model="checks" :value='item' id="">
                    </td>
                    <td>
                        <img width="100" :src="item.imgSrc" alt="">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.productName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button @click="decrease(item)" :disabled="item.count===1">-</button>
                        &nbsp;
                        {{item.count}}
                        &nbsp;
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click='del(index)'>删除</button>
                    </td>
                </tr>
            </table>
            <div class="add" style="text-align: center;" v-show="!products.length">没有更多数据了</div>
            <h1 class="add" style="text-align:right">总价格:{{total}}</h1>
        </div>
    </div>
    </fieldset>
</template>
<script>
let local = {
    get(key) {
        return JSON.parse(localStorage.getItem(key))
    },
    set(key, value) {
        localStorage.setItem(key, JSON.stringify(value))
    }
}
export default{
    data(){
        return{
            allCheck:false,
            checks:[],
            code: "",
            productName: "",
            imgSrc: "",
            price: "",
            products: local.get('ms') ?? [
                {
                    id: 1,
                    imgSrc: "https://img0.baidu.com/it/u=4174193212,4027485604&fm=253&fmt=auto&app=138&f=JPEG?w=240&h=226",
                    code: "1122",
                    productName: "糟糕糟糕 Oh my god 魔法怎么失灵啦",
                    count: 1,
                    price: 3.33
                },
                {
                    id: 2,
                    imgSrc: "https://img0.baidu.com/it/u=4234414730,1805690976&fm=253&fmt=auto&app=138&f=JPG?w=224&h=211",
                    code: "1123",
                    productName: "祖师爷",
                    count: 10,
                    price: 100
                }
            ]
        }
    },
    methods: {
        increase(current){
            current.count++
        },
        decrease(current){
            current.count--
        },
        del(index) {
            console.log(index)
            let target=this.products.splice(index, 1)
            local.set('ms', this.products)

            console.log(target)
            this.checks=this.checks.filter(item=>item.id!==target[0].id)
        },
        add() {
            if (!this.code || !this.imgSrc || !this.price || !this.productName) {
                return
            }
            let obj = {
                id: Math.random().toString(32).substring(2),
                imgSrc: this.imgSrc,
                code: this.code,
                productName: this.productName,
                count: 1,
                price: this.price
            }
            this.products.push(obj)
            local.set('ms', this.products)
        },
        allCheckChange(){
            console.log(this.allCheck)
            if(this.allCheck){
            this.checks=this.products;
            }else{
            this.checks=[]
            }
        }
    },
    watch:{
        checks(newChecks){
            console.log(newChecks)
            if(newChecks.length===this.products.length){
                this.allCheck=true;
            }else{
                this.allCheck=false
            }
        }
    },
    computed:{
        total(){
            let res=this.checks.reduce((total,item)=>{
                return total+=item.price*item.count
            },0)
            return res.toFixed(2)
        }
    }
}
</script>
<style  scoped>
    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: yellowgreen;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>